<template>
  <div class="CollectMoneyMode">
    <div class="cus-titil-1">
      <h4 v-if="$route.params.state == 'edit'">编辑收款方式</h4>
      <h4 v-else>新增收款方式</h4>
    </div>
    <div class="cus-content">
      <div class="cus-title"><h4>填写账号信息</h4></div>
      <el-form ref="forms" :model="BindForm" :rules="pattern">
        <el-form-item label="账号类型:">
          <el-col :span="20">
            <el-radio-group
              v-if="$route.params.rows"
              v-model="BindForm.payType"
              @change="handelpayType"
            >
              <el-radio-button
                label="0"
                :disabled="
                  $route.params.rows.type == '1' ||
                    $route.params.rows.type == '2'
                "
              >
                <img src="./../../../icons/zfb.png" alt="">
              </el-radio-button>
              <el-radio-button
                label="1"
                :disabled="
                  $route.params.rows.type == '0' ||
                    $route.params.rows.type == '2'
                "
              >
                <img src="./../../../icons/wx.png" alt="">
              </el-radio-button>
              <el-radio-button
                label="2"
                :disabled="
                  $route.params.rows.type == '1' ||
                    $route.params.rows.type == '0'
                "
              >
                <img src="./../../../icons/yhk.png" alt="">
              </el-radio-button>
            </el-radio-group>
            <el-radio-group
              v-else
              v-model="BindForm.payType"
              @change="handelpayType"
            >
              <el-radio-button label="0">
                <img src="./../../../icons/zfb.png" alt="">
              </el-radio-button>
              <el-radio-button label="1">
                <img src="./../../../icons/wx.png" alt="">
              </el-radio-button>
              <el-radio-button label="2">
                <img src="./../../../icons/yhk.png" alt="">
              </el-radio-button>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <div v-if="BindForm.payType == '0'">
          <el-form-item label="账号:" prop="account">
            <el-col :span="6">
              <el-input
                v-model="BindForm.account"
                placeholder="输入支付宝账号"
              />
            </el-col>
            <el-col :span="6" class="cus-col">
              <p>
                注意:请输入支付宝手机账号或邮箱账号和实名认证的名字，请注意检查支付宝账号，输入错误的支付宝账号可能会导致提现时转账不成功。
              </p>
            </el-col>
          </el-form-item>
          <el-form-item label="实名信息:" prop="realName">
            <el-col :span="6">
              <el-input
                v-model="BindForm.realName"
                placeholder="输入实名认证名字"
              />
            </el-col>
          </el-form-item>
        </div>
        <div v-else-if="BindForm.payType == '1'">
          <el-form-item label="账号:" prop="account">
            <el-col :span="6">
              <el-input
                v-model="BindForm.account"
                placeholder="输入微信绑定的手机号"
              />
            </el-col>
            <el-col :span="6" class="cus-col">
              <p>
                注意:请输入微信账号绑定的手机号码和实名认证的名字，请注意检查手机号码，输入错误的手机号可能会导致提现时转账不成功。
              </p>
            </el-col>
          </el-form-item>
          <el-form-item label="实名信息:" prop="realName">
            <el-col :span="6">
              <el-input
                v-model="BindForm.realName"
                placeholder="输入实名认证名字"
              />
            </el-col>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="银行卡号:" prop="bankCard">
            <el-col :span="6">
              <el-input
                v-model="BindForm.bankCard"
                maxlength="19"
                placeholder="输入银行卡号"
              />
            </el-col>
            <el-col :span="6" class="cus-col">
              <p>
                注意:银行卡号、户名和开户行名称必须为相互对应，输入错误或信息不匹配会导致提现时转账不成功。
              </p>
            </el-col>
          </el-form-item>
          <el-form-item label="户名:" prop="accountName">
            <el-col :span="6">
              <el-input
                v-model="BindForm.accountName"
                placeholder="开户银行卡户名"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="银行:" prop="bankName">
            <el-col :span="6">
              <el-input
                v-model="BindForm.bankName"
                maxlength="20"
                placeholder="银行"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="开户银行名称:" prop="bankAccountName">
            <el-col :span="6">
              <el-input
                v-model="BindForm.bankAccountName"
                placeholder="开户银行行名称"
              />
            </el-col>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button
            style="width:200px;margin-top:40px;margin-left:120px"
            type="primary"
            :loading="butLoading"
            @click="handelSubmit"
          >提交</el-button>
          <el-button @click="handelfilset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
/** 新增账户/编辑收款放方式 */
/** 店铺信息 */
import { shopInformation } from '@/api/customAPI/shop/shopInformation'
export default {
  name: 'CollectMoneyMode',
  data() {
    var bankCard = (rule, value, collback) => {
      if (/^\d*$/.test(value)) {
        collback()
      } else {
        rule.message = '不允许有非数字'
        collback(new Error())
      }
    }
    return {
      butLoading: false,
      BindForm: {
        payType: '0',
        account: '',
        realName: '',
        shopId: localStorage.getItem('shopId'),
        bankCard: '',
        accountName: '',
        bankName: '',
        bankAccountName: '',
        id: ''
      },
      pattern: {
        account: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }
        ],
        realName: [
          {
            required: true,
            message: '请输入实名信息',
            trigger: 'blur'
          }
        ],
        bankCard: [
          {
            required: true,
            message: '请输入十六至十九位银行卡号',
            trigger: 'blur',
            min: 16,
            max: 19
          },
          {
            required: true,
            message: '请输入正确的卡号',
            trigger: 'change',
            validator: bankCard
          }
        ],
        accountName: [
          {
            required: true,
            message: '请输入开户名',
            trigger: 'blur'
          }
        ],
        bankAccountName: [
          {
            required: true,
            message: '请输入开户银行',
            trigger: 'blur'
          }
        ],
        bankName: [
          {
            required: true,
            message: '请输入银行名',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    this.initialInfo()
  },
  activated() {
    this.initialInfo()
  },
  methods: {
    initialInfo() {
      if (this.$route.params.state === 'edit') {
        this.BindForm.id = this.$route.params.rows.id
        this.BindForm.payType = this.$route.params.rows.type
        this.BindForm.bankCard = this.$route.params.rows.accountCard
        this.BindForm.bankName = this.$route.params.rows.bankName
        this.BindForm.bankAccountName = this.$route.params.rows.openingBank
        this.BindForm.realName = this.$route.params.rows.accountName
        this.BindForm.accountName = this.$route.params.rows.accountName
        this.BindForm.account = this.$route.params.rows.accountCard
      }
    },
    handelpayType(v) {},
    handelfilset() {
      if (this.$route.params.state === 'edit') {
        this.BindForm.id = this.$route.params.rows.id
        this.BindForm.payType = this.$route.params.rows.type
        this.BindForm.bankCard = this.$route.params.rows.accountCard
        this.BindForm.bankName = this.$route.params.rows.bankName
        this.BindForm.bankAccountName = this.$route.params.rows.openingBank
        this.BindForm.realName = this.$route.params.rows.accountName
        this.BindForm.accountName = this.$route.params.rows.accountName
        this.BindForm.account = this.$route.params.rows.accountCard
      } else {
        this.$refs.forms.resetFields()
      }
    },
    /** 提交 */
    handelSubmit() {
      this.butLoading = true
      this.$refs.forms.validate(v => {
        if (v) {
          if (this.$route.params.state === 'edit') {
            this.BindForm.id = this.$route.params.rows.id
          }
          shopInformation(this.BindForm)
            .then(result => {
              this.$message.success('成功')
              this.butLoading = false
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.go(-1)
            })
            .catch(() => {
              this.butLoading = false
            })
        } else {
          this.butLoading = false
        }
      })
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('tagsView/delView', from)
    next()
  }
}
</script>

<style lang="scss" scoped>
.CollectMoneyMode {
  padding: 20px 50px;
  .cus-titil-1 {
    border-bottom: 1px solid #e6e6e6;
  }
  .cus-content {
    padding: 20px 50px;
    .cus-title {
      border-left: 4px solid black;
      padding-left: 10px;
      height: 20px;
      line-height: 20px;
    }
    ::v-deep.el-form {
      margin-top: 40px;
      .el-form-item__label {
        width: 120px;
        text-align: start;
      }
      .el-form-item__error {
        margin-left: 120px;
      }
      .el-form-item {
        position: relative;
        .cus-col {
          position: absolute;
          left: 50%;
          top: -30px;
        }
        .el-radio-group {
          .el-radio-button {
            border: 1px solid #d1d1d1;
            border-radius: 5px;
            .el-radio-button__inner {
              padding: 0;
            }
            img {
              width: 180px;
              height: 50px;
              object-fit: cover;
            }
          }
          .el-radio-button:nth-child(2) {
            margin: 0px 20px;
          }
        }
      }
    }
  }
}
</style>
